<template>
  <div class="login-wrap">
    <div class="login-container">
      <!-- el-form 表单组件
        label-posirion 设定 label的方向
          left、top、right

        配置表单验证
          1. 为 el-form 组件添加   :rules="loginFromRules" 验证规则
          2. 为 el-from-itme 组件添加 prop=“验证的字段”
          3. 提交表单的时候获取表单的验证状态（验证通过或者验证失败），根据成功与否进行提交表单
            为 el-form 添加 ref="loginFormEL" 值随便起，给的你认识就行
            完了在表单提交的时候：
              this.$refs.loginFormEL.validate(valid => {
                // valid 是一个布尔值，表示验证成功与否
              })
         -->
      <el-form
       label-position="labelPosition"
       :rules="loginFormRules"
       label-width="80px"
       :model="loginForm"
       ref="loginFormEL"
      >
  <el-form-item label="用户名" prop="username">
    <el-input v-model="loginForm.username"></el-input>
  </el-form-item>
  <el-form-item label="密  码" prop="password">
    <el-input v-model="loginForm.password"></el-input>
  </el-form-item>
  <el-form-item>
     <el-button class="login-btn" type="primary" @click.prevent="onSubmit">登 录</el-button>
  </el-form-item>
</el-form>
    </div>
  </div>
</template>

<script>
import { login } from '@/api'
import { setToken } from '@/utils/auth'

export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },

      loginFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async onSubmit () {
      this.$refs.loginFormEL.validate(valid => { // valid 是一个布尔值，表示验证成功与否
        if (valid) { // 验证通过，提交表单
          this.login()
        } else {
          return false
        }
      })
    },

    async login () {
      const { meta, data } = await login(this.loginForm)
      // console.log(resData)
      // const { meta, data } = resData.data
      if (meta.status === 200) {
        this.$message({
          message: '恭喜你，登录成功',
          type: 'success'
        })
        // 将用户通过用户名+密码交换到的 token （身份令牌） 放到本地存储中，用以在别的地方去使用
        // window.localStorage.setItem('token', data.token)
        setToken(data.token)
        this.$router.replace('/')
      } else {
        // console.log(resData)
        this.$message.error('登录失败')
      }
    }
  }
}
</script>

<style  scoped>
.login-wrap {
  height: 100%;
  background-color: magenta;
  /* 弹性布局，父容器display：flex */
  display: flex;
  /*justify-content: center; 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
}

.login-container {
  height: 240px;
  width: 420px;
  background-color: cornsilk;
  border-radius: 10px;
  box-shadow: 10px 10px hotpink;
  padding-top: 50px;
}
.login-btn {
  margin-top: 20px;
  width: 300px;
  /* color: #000; */
}
</style>
